// 面向对象
; (function (doc) {
    // 构造函数
    const Tab = function (mode) { // mode成员属性 切换方式
        this.oTab = doc.querySelector('.tab-head');
        this.oCont = doc.querySelector('.tab-content');
        this.oItems = doc.getElementsByClassName('tab-item');
        this.mode = mode === 'fade' || mode === 'slide' ? mode : 'fade';
    }
    Tab.prototype.init = function () {
        this.bindEvent();
        this.setMode();
    }
    Tab.prototype.setMode = function () {
        this.oCont.className += ' ' + this.mode;
    }
    Tab.prototype.bindEvent = function () {
        this.oTab.addEventListener('click', this.handleTabClick.bind(this), false);
    }
    Tab.prototype._pagesChange = function (index) {
        switch (this.mode) {
            case 'fade':
                this._fadeChange(index);
                break;
            case 'slide':
                this._slideChange(index)
                break;
            default:
                this._fadeChange(index);
                break;
        }
    }
    Tab.prototype._fadeChange = function (index) {
        for (var i = 0; i < this.oItems.length; i++) {
            this.oItems[i].style.display = 'none'
        }
        this.oItems[index].style.display = 'block';
    }
    Tab.prototype._slideChange = function (index) {
        for (var i = 0; i < this.oItems.length; i++) {
            this.oItems[i].style.display = 'none'
        }
        this.oItems[index].style.display = 'block';
    }
    Tab.prototype.handleTabClick = function (e) {
        var e = e || window.event,
            tar = e.target || e.srcElement;
        if (tar.className === "tab-head") {
            return;
        }
        siblingsNodes = tar.parentNode.children;
        var tarIndex = Array.from(siblingsNodes).findIndex(item => item == tar);
        for (var i = 0; i < siblingsNodes.length; i++) {
            siblingsNodes[i].className = '';
        }
        this._pagesChange(tarIndex);
        tar.className = 'active';

    }
    window.Tab = Tab;
})(document);
